<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Connexion SquareTASKS</title>
<style type="text/css">

@import url("css/reset.css");
@import url("css/960gs.css");
</style>
<style>

	.logo{
		background:url(images/logoSquareTasks.png) no-repeat;
		height:74px;
		width:335px;
	}

	#page{
		font-family: Calibri, Arial, "MS Trebuchet", sans-serif;
		position: absolute;
		display: block;
		overflow: visible;
		-moz-box-shadow: inset 0px 0px 80px 4px #656565;
		-webkit-box-shadow: inset 0px 0px 80px 4px #656565;
		-o-box-shadow: inset 0px 0px 80px 4px #656565;
		box-shadow: inset 0px 0px 80px 4px #656565;
		left:0;
		right:0;
		bottom:0;
		top:0;
	}

	.topBody{
		background-color: #555;
		border-bottom: 3px solid #4D91C2;
		width:100%;
		left:0;
		right:0;
		top:0;
		height:8px;
	}

	.topContain{
		padding-top: 100px;
	}

	.box{
		height:190px;
		width:100%;
		margin-bottom:10px;
		display: block;
	}

	.box:hover{
		opacity:0.8;
	}

	.inConnexion{
		background: #479EA8;
		background: -moz-linear-gradient(left, #479EA8 1%, #53B6BC 98%);
		background: -webkit-gradient(linear, left top, right top, color-stop(1%,#479EA8), color-stop(98%,#53B6BC));
		background: -webkit-linear-gradient(left, #479EA8 1%,#53B6BC 98%);
		background: -o-linear-gradient(left, #479EA8 1%,#53B6BC 98%);
		background: -ms-linear-gradient(left, #479EA8 1%,#53B6BC 98%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#479ea8', endColorstr='#53b6bc',GradientType=1 );
		background: linear-gradient(left, #479EA8 1%,#53B6BC 98%);
	}

	.connexion{
		background:#C74430;
		background: -moz-linear-gradient(left, #C74430 3%, #E8513A 98%);
		background: -webkit-gradient(linear, left top, right top, color-stop(3%,#C74430), color-stop(98%,#E8513A));
		background: -webkit-linear-gradient(left, #C74430 3%,#E8513A 98%);
		background: -o-linear-gradient(left, #C74430 3%,#E8513A 98%);
		background: -ms-linear-gradient(left, #C74430 3%,#E8513A 98%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C74430', endColorstr='#E8513A',GradientType=1 );
		background: linear-gradient(left, #C74430 3%,#E8513A 98%);
	}

	.inscription{
		background: #DE8211;
		background: -moz-linear-gradient(left, #DE8211 0%, #E3A419 94%);
		background: -webkit-gradient(linear, left top, right top, color-stop(0%,#DE8211), color-stop(94%,#E3A419));
		background: -webkit-linear-gradient(left, #DE8211 0%,#E3A419 94%);
		background: -o-linear-gradient(left, #DE8211 0%,#E3A419 94%);
		background: -ms-linear-gradient(left, #DE8211 0%,#E3A419 94%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#de8211', endColorstr='#e3a419',GradientType=1 );
		background: linear-gradient(left, #DE8211 0%,#E3A419 94%);
	}

	.footer{
		position:absolute;
		bottom:0;
		color:#eee;
		background-color: #555;
		left:0;
		right:0;
		text-align:center;
		padding:3px;
	}

	.box .connect{
		position:absolute;
		color: white;
		font-size:48px;
		text-align:center;
		line-height:4;
		text-transform: uppercase;
		top:0;
		left:0;
		right:0;
		font-weight:bold;
	}

	.box .inscrip{
		position:absolute;
		color: white;
		font-size:48px;
		text-align:center;
		line-height:4;
		text-transform: uppercase;
		top:0;
		left:0;
		right:0;
		font-weight:bold;
	}

	.champs{
		width:70%;
		height:70%;
		margin: 60px auto;
	}

	input{
		height:28px;
	}
</style>
</head>

<body>
	<div class="topBody"></div>
	<div id="page">
		<div class="container_16 topContain">
			<div class="logo grid_6 push_6"></div>
			<div class="clear"></div>
			<a href="#" class="box inConnexion push_4 grid_4">
				<div class="champs">
					<input type="text" name="login" placeholder="Login" required size="40%"><br />
					<input type="text" name="password" placeholder="Password" required size="40%">
				</div>
			</a>
			<a href="#" class="box connexion grid_4 push_4"><span class="connect">Connexion</span></a>
			<div class="clear"></div>
			<a href="#" class="box inscription push_4 grid_8"><span class="inscrip">Inscription</span></a>
		</div>
	</div>
	<div class="footer">Copyright 2012 SquareTasks</div>
</body>
</html>
